<template>
  <avue-crud ref="crudRef" v-model="form" :option="option" :data="data" @on-load="getList" @row-click="handleRowClick">
    <template #menu="{ row }">
      <el-button size="small"><router-link
          :to="'/self/container?container_id=' + row.container_id">管理</router-link></el-button>
      <SetMenu v-if="btnShow==true" :state="row.container_state" :id="row.container_id" />
    </template>
  </avue-crud>
  <el-pagination background layout="prev, pager, next,sizes" :total="total" :current-page="containerBox.page"
    :page-size="containerBox.count" @update:current-page="handleCurrentPageChange"
    @update:page-size="handlePageSizeChange" :page-sizes="[1, 5, 10]" />
</template>
<script setup>
import SetMenu from "./SetMenu.vue";
import { getUserContainer } from "@/api";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from 'vue-router';
const router = useRouter()
onMounted(() => {
  getWidth()
})
//获取this
const option = ref(null);
const data = ref(null);
const form = ref({});
//分页
const containerBox = reactive({
  page: 1,
  count: 10,
});
const total = ref(10);
const handleCurrentPageChange = async newPage => {
  containerBox.page = newPage;
  getList()

};
const handlePageSizeChange = async newSize => {
  containerBox.count = newSize;
  getList()
 
};
const handleRowClick = (row, column, event) => {
  if (column.property=== 'container_id') {
      const routerLink = `/self/container?container_id=${row.container_id}`;
      router.push(routerLink);
     
    }
  }
//管理按钮
const btnShow=ref(true)
const getWidth = () => {
  let screenWidth = window.innerWidth;
  if (screenWidth < 768) {
   btnShow.value=false
  } else {
    btnShow.value=true
  }
}

option.value = {
  header: false,
  index: false,
  delBtn: false,
  editBtn: false,
  menu: true,
  minWidth: 150,
  menuWidth: 250,
  column: [
    {
      label: "ID",
      prop: "container_id",
      showOverflowTooltip: true
     
    },
    {
      label: "购买价格",
      prop: "pay"
    },
    {
      label: "到期时间",
      prop: "become_time",
      showOverflowTooltip: true
    },
    {
      label: "所属套餐",
      prop: "plan_id",
      showOverflowTooltip: true
    },
    {
      label: "所属服务器",
      prop: "server_id",
      showOverflowTooltip: true
    },
    {
      label: "状态",
      prop: "computedStatus", 
      formatter: (row) => {
        return row.container_state == 0 ? "未支付"
          : row.container_state == 1
            ? "未开通"
            : row.container_state == 2
              ? "开机"
              : "关机";
      },
    }
  ]
};
data.value = [];
function getList() {
  getUserContainer(containerBox).then(res => {
    data.value = res.data.data || [];
    total.value=res.data.count
    console.log(res);
  });
}
</script>
